<template>
  <section>
    <el-row :gutter="20">
      <!--<el-col :span="4">
              <el-select
                v-model="searchParams.appId"
                clearable
                @change="doSearch"
                placeholder="请选择应用">
                <el-option
                  v-for="(item,index) in applications"
                  :key="index"
                  :label="item.code +' - ' + item.description"
                  :value="item.id"/>
              </el-select>
      </el-col>-->
      <el-col :span="4">
        <el-input
          v-permission="'permission.list'"
          placeholder="请输入搜索关键词"
          v-model="searchParams.key"
          prefix-icon="fa fa-search"
        >
          <div slot="append">
            <el-button
              type="primary"
              icon="fa fa-search"
              @click=" pager.pager.pageNumber = 1 ;doSearch()"
            />
          </div>
        </el-input>
      </el-col>
      <el-col
        :span="4"
        :offset="12"
      >
        <el-button
          v-permission="installPermissions.permissions.permission.add"
          type="primary"
          size="small"
          @click="handleEdit({id:0})"
          icon="el-icon-plus"
        >
          添加权限
        </el-button>
      </el-col>
    </el-row>
    <egrid
      class="egrid"
      stripe
      border
      :data="pager.dataList"
      :columns="columns"
    />
    <el-row>
      <el-col
        :span="6"
        :offset="18"
      >
        <el-pagination
          style="float:right"
          layout="prev, pager, next"
          :total="pager.pager.recordCount"
          :page-size="pager.pager.pageSize"
          :current-page.sync="pager.pager.pageNumber"
          v-show="pager.pager.pageCount != 0"
          @current-change="changePage"
        />
      </el-col>
    </el-row>
    <!-- 添加和编辑弹出框 -->
    <AddAndEdit
      v-model="addAndEditValue"
      @on-show-change="addAndEditDone"
    />
  </section>
</template>
<style>
</style>
<script>
import Ops from "./ops.vue";
import AddAndEdit from "./AddAndEdit";

export default {
  components: {
    AddAndEdit: AddAndEdit
  },
  data() {
    return {
      searchParams: {
        key: ""
      },
      applications: [],
      addAndEditValue: {
        show: false,
        permission: { id: 0 }
      },
      columns: [
        { label: "ID", width: "55", align: "center", prop: "id" },
        {
          label: "名称",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "name"
        },
        {
          label: "描述",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "description"
        },
        {
          label: "状态",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "statusName",
          propsHandler: function({ row, col, column }) {
            row.statusName = row.status.name;
            return { row, col, column };
          }
        },
        {
          label: "操作",
          align: "center",
          component: Ops,
          listeners: {
            deleteDone: this.loadData,
            editRow: this.handleEdit
          }
        }
      ],
      pager: {
        dataList: [],
        pager: {
          pageCount: 0,
          pageNumber: 1,
          pageSize: 15,
          recordCount: 0
        },
        paras: {
          key: ""
        }
      }
    };
  },
  methods: {
    doSearch() {
      this.$api.permission.search(
        this.searchParams.key,
        this.pager.pager.pageNumber,
        result => {
          this.pager = result.pager;
        }
      );
    },
    changePage() {
      if (this.searchParams.key) {
        this.doSearch();
      } else {
        this.loadData();
      }
    },
    handleEdit(row) {
      this.addAndEditValue = {
        show: true,
        permission: this.$clone(row),
        applications: this.$clone(this.applications)
      };
    },
    addAndEditDone(data) {
      this.addAndEditValue.show = data.visible;
      this.addAndEditValue.permission = data.permission;
      this.changePage();
    },
    loadData() {
      this.$api.permission.list(this.pager.pager.pageNumber, result => {
        this.pager = result.pager;
      });
    }
    // loadApplications() {
    //   this.$api.application.all(result => {
    //     this.applications = result.applications;
    //   });
    // }
  },
  created() {
    this.loadData();
    // this.loadApplications();
  }
};
</script>
